<template>
  <div class="op-calendar-pc">
    <div class="op-calendar-pc-box">
      <div class="op-calendar-pc-left">
        <div class="op-calendar-pc-select-box" style="visibility: visible">
          <div class="op-calendar-pc-year-box">
            <el-date-picker
            style="width:96px;height: 30px;"
            v-model="selectYear"
            type="year"
            placeholder="选择年份"
            format="YYYY"
            value-format="YYYY"
            :clearable="false"
            @change="handleChangeYear"
            />
          </div>
          <div class="op-calendar-pc-holiday-box">
            <el-date-picker
            style="width:96px;height: 30px;"
            v-model="selectMonth"
            type="month"
            placeholder="选择月份"
            format="MM"
            :clearable="false"
            value-format="MM"
            @change="handleChangeMonth"
            />
          </div>
          <div class="op-calendar-pc-prev" @click="handlePrevMonth">
            <el-icon><ArrowLeft /></el-icon>
          </div>
          <div class="op-calendar-pc-next" @click="handleNextMonth">
            <el-icon><ArrowRight /></el-icon>
          </div>
          <span
            class="op-calendar-pc-backtoday OP_LOG_BTN"
            hidefocus="true"
            @click="getToday">今天
          </span>
        </div>
        <div class="op-calendar-pc-table-box">
          <table class="op-calendar-pc-table">
            <tbody>
              <tr style="text-align: center">
                <th>一</th>
                <th>二</th>
                <th>三</th>
                <th>四</th>
                <th>五</th>
                <th class="op-calendar-pc-table-weekend">六</th>
                <th class="op-calendar-pc-table-weekend">日</th>
              </tr>
              <tr v-for="(lineDateArray, index) in fullDateArray" :key="index">
                <td v-for="item of lineDateArray" :key="item.date">
                  <div class="op-calendar-pc-relative">
                    <a
                      href="javascript:void(0);"
                      :class="{
                        'op-calendar-pc-table-selected': item.isSelectClass,
                        'op-calendar-pc-table-other-month': item.otherMonth,
                        'op-calendar-pc-table-festival': item.hasTerm,
                        'op-calendar-pc-table-weekend': item.isWeekend,
                        'op-calendar-pc-table-work': item.isWorkDay,
                        'op-calendar-pc-table-rest': item.isRestDay,
                        'op-calendar-pc-table-checked': item.date === checkedDate
                      }"
                      :date="item.date"
                      @click.stop="selectDayAction"
                    >
                      <span
                        class="op-calendar-pc-table-holiday-sign"
                        v-if="item.isWorkDay"
                        >班</span
                      >
                      <span
                        class="op-calendar-pc-table-holiday-sign"
                        v-if="item.isRestDay"
                        >休</span
                      >
                      <span class="op-calendar-pc-daynumber">{{
                        item.day
                      }}</span>
                      <span class="op-calendar-pc-table-almanac">{{
                        item.d_day
                      }}</span>
                    </a>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="op-calendar-pc-right">
        <p class="op-calendar-pc-right-date">{{ selectDayDate }}</p>
        <p class="op-calendar-pc-right-day">{{ dayInfo.cDay }}</p>
        <p class="op-calendar-pc-right-lunar c-gap-top-small">
          <span>{{ dayInfo.monthCn }}{{ dayInfo.dayCn }}</span>
          <span style="font-size:14px;color:#cfcfcf">{{ dayInfo.gzYear }}年 {{ dayInfo.animal }}</span>
          <span style="font-size:14px;color:#cfcfcf">{{ dayInfo.gzMonth }}月 {{ dayInfo.gzDay }}日</span>
        </p>
        <p class="op-calendar-pc-right-holid1" v-if="dayInfo.lunarFestival">
          {{ dayInfo.lunarFestival }}
        </p>
        <p class="op-calendar-pc-right-holid1" v-if="dayInfo.festival">
          {{ dayInfo.festival }}
        </p>
        <div
          :class="{
            'op-calendar-pc-right-almanacbox': true
            // 'op-calendar-pc-right-hover': hoverClass,
          }"
        >
          <div
            v-if="dayTaboo.length"
            class="op-calendar-pc-right-almanac">
            <span class="op-calendar-pc-right-suit">
              <i>宜</i>
              <div v-for="item in dayTaboo[0]" :key="item">
                {{item}}<br/>
              </div>
            </span>
            <span class="op-calendar-pc-right-avoid">
              <i>忌</i>
              <div v-for="item in dayTaboo[1]" :key="item">
                {{item}}<br/>
              </div>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="op-calendar-pc-holidaytip"></div>
  </div>
</template>

<script lang='ts' src='./index.ts'>
</script>

<style scoped lang="scss" src="./index.scss">

</style>
